<template>
  <div class="p-6px">
    <el-card class="rounded-md" shadow="never" style="min-height: 830px">
      <el-tabs v-model="activeName" type="border-card">
        <el-tab-pane :label="item.name" :name="item.key" v-for="(item, index) in tabs" :key="index" >
          <div v-if="activeName === item.key">
            <component @handle-submit="handleClick" :name="item.name" :config-key="item.key" :is="item.component" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="coleWechatConfigPage">
import { ref } from "vue";
import WechatMp from "./components/WechatMp.vue";
import { setConfig } from "@/api/system/config";
import { koiMsgError, koiMsgSuccess } from "@/utils/koi";

let tabs = ref<any>([
  {
    name: "微信公众号管理",
    key: "COLEWECHAT_WECHATMP_CONFIG",
    component: ref(WechatMp)
  }
]);

const activeName = ref(tabs.value[0].key);

const handleClick = (form: any) => {
  setConfig({
    key: activeName.value,
    value: form
  })
    .then(() => {
      koiMsgSuccess("操作成功");
    })
    .catch(() => {
      koiMsgError("操作异常");
    });
};

</script>

<style lang="scss" scoped></style>
